{% extends 'base/base.html' %}
{% load static %}

{% block css %}
<style>
.head{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    {% if request.user.header %}
        background: url("{{ request.user.header.url }}") no-repeat center;
    {% else %}
        background: url("/media/head/head.png") no-repeat center;
        background-color: #f0f0f0;
    {% endif %}
    background-size: cover;
    border: 3px solid #ddd;
    display: inline-block;
}

.head-img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 3px solid #ddd;
    object-fit: cover;
    display: block;
    margin: 10px 0;
}

</style>
{% endblock %}


{% block js %}


{% endblock %}

{% block main %}

    <h1>个人中心</h1>

    <ul class="list-group">
      <li class="list-group-item"> 用户名: {{ request.user.username}}</li>
      <li class="list-group-item"> 头像:
          {% if request.user.header %}
              <img src="{{ request.user.header.url }}" alt="用户头像" class="head-img">
          {% else %}
              <img src="/media/head/head.png" alt="默认头像" class="head-img">
          {% endif %}
      </li><li class="list-group-item"> 注册时间： {{ request.user.date_joined }}</li>
      <li class="list-group-item"> 上次登录时间： {{ request.user.last_login }}</li>


    </ul>

{% endblock %}

